<template>
	<!-- tab切换列表 -->
	<view>
		<u-subsection :list="list" mode="button" :current="type" @change="toggleActive"></u-subsection>
	</view>
	<!-- 列表 -->
	<block v-for="(item,i) in datalist" :key="i">
		<my-lose-list :losedata="item" :handle='true' @getupdate='toupdate' @getdelete='todelete'></my-lose-list>
	</block>
	<view class="noList">
		<!-- 没有信息的 -->
		<text class="noList-text" v-if="listLength > 0">没有更多了呢</text>
		<!-- 有信息的 -->
		<text class="noList-text" v-else>还没有发布信息呢</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	import {
		formatTime
	} from '../../utils/index.js';
	const type = ref(0)
	const list = ref(['寻主', '寻物'])
	const datalist = ref([])
	const listLength = ref(0)
	const openid = uni.getStorageSync('openid')

	const toupdate = (id) => {
		uni.setStorageSync('updataid', id)
		uni.switchTab({
			url: '/pages/issue/issue'
		})
	}
	const todelete = (id) => {
		http.post('/deleteLose', {
			_id: id
		}).then((res) => {
			const {
				data
			} = res
			if (data === 'success') {
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					success() {
						http.get('/getMyPublih', {
							params: {
								openid: openid,
								type: type.value
							}
						}).then((res) => {
							const {
								data
							} = res
							datalist.value = data.map(item => {
								return {
									...item,
									time: formatTime(item.time)
								}
							})
							listLength.value = 0
							listLength.value = datalist.value.length
						})
					}
				})
			} else {
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				})
			}
		})
	}
	// 判断所点的按钮切换样式
	const toggleActive = (index) => {
		if (index === 0) {
			type.value = index
			http.get('/getMyPublih', {
				params: {
					openid: openid,
					type: type.value
				}
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		} else if (index === 1) {
			type.value = index
			http.get('/getMyPublih', {
				params: {
					openid: openid,
					type: type.value
				}
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		}
	}
	onLoad(() => {
		const openid = uni.getStorageSync('openid')
		http.get('/getMyPublih', {
			params: {
				openid: openid,
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	});
	onPullDownRefresh(() => {
		const openid = uni.getStorageSync('openid')
		http.get('/getMyPublih', {
			params: {
				openid: openid,
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800)
	})
	onShow(() => {
		http.get('/getMyPublih', {
			params: {
				openid: openid,
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	})
</script>

<style lang="less">
	.noList {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.noList-text {
			color: rgba(126, 126, 126, 0.7);
			font-size: 15px;
		}
	}
</style>